<template>
  <div class="file-upload-div">
    <label class="input-text-lable">{{inputLable}}：</label>
    <input class="file-load-input" name="file" ref="fileInput" @change="fileUpload($event)" type="file" multiple="multiple"/>
    <label class="input-text-lable">文件序列号：</label>
    <input class="file-load-input-value" type="text" disabled="true" ref="fileUUID"/>
  </div>
</template>

<script>
import {postRequestForUpload} from "@/axio2";

export default {
  name: "FileUploadComponent",
  props:{
    inputLable:String,
    inputName:String
  },
  methods:{
    fileUpload:function (event) {
      let formData = new FormData();
      let fileList = event.target.files;
      for(let j=0;fileList.length>j;j++){
        formData.append('file',fileList[j]);
      }
      postRequestForUpload(
          'operFile/upload.do',
          formData,
          this.uploadSuccess,
          null,
          this
      );
    },
    getInputValue(){
      return {"name": this.inputName, "value":this.$refs["fileUUID"].value}
    },
    uploadSuccess:function (data,component) {
      component.$refs["fileUUID"].value = data.data;
    }
  },
  mounted() {
    this.$parent.$emit("inputRegist",this.inputName,this);
  },
  destroyed() {
    this.$parent.$emit("inputUnRegist",this.inputName);
  }
}
</script>

<style scoped>
.file-upload-div{
  width: 100%;
  padding-right: 20px;
  padding-bottom: 15px;
  text-align: left;
}
.file-upload-div{
  height: 25px;
  border-radius: 5px;
}
.file-load-input-value{
  height: 25px;
  width: 300px;
  display: inline;
}
.input-text-lable{
  font-size: smaller;
}
</style>